<template>
<div>

  <div style="text-align: right;">
    <Input v-model="paramSearch.batch" placeholder="批次号" style="display: inline-block;max-width: 15rem;margin-right: 1rem" ></Input>
    <Button type="primary" @click="search()">搜索</Button>
  </div>
  <divider></divider>
  <List border>
    <template v-if="productList.length > 0">
      <ListItem style="text-align: left" v-for="(item, index) in productList" :key="index">
        <div>
          <KeyValueView title="编号"><span style="min-width: 1rem;display: inline-block">{{index+1}}</span></KeyValueView>
          <KeyValueView title="采集批次" :value="item.batch"></KeyValueView>
          <KeyValueView title="平台" :value="item.platform"></KeyValueView>
          <KeyValueView title="采集分类" :value="item.categoryNames==null?'':item.categoryNames.join('/')"></KeyValueView>
          <KeyValueView title="采集理由" :value="item.collectReason"></KeyValueView>
          <KeyValueView title="采集链接" oneline><a @click="addClickHref()"
                                                :href="item.url+'?caiji='+(index+1)" target="_blank">{{item.url}}</a></KeyValueView>
        </div>
      </ListItem>
    </template>
    <template v-else>
      <ListItem>
        <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
      </ListItem>
    </template>
  </List>
  <div style="text-align: right; margin-top: 20px;">
    <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum" @on-change="pageNumChange"
          @on-page-size-change="pageSizeChange" :page-size-opts="page.options"
          show-sizer show-elevator show-total></Page>
  </div>
</div>
</template>

<script>
import KeyValueView from "../widgets/KeyValueView";
import productData from "./js/product/productData";

export default {
  name: "ProductCaiji",
  data() {
    return {
      paramSearch: {
        batch: "",
        platform: null,
      },
      productList:[],
      page: {
        total: 0,
        pageNum: 1,
        pageSize: 40,
        options: [40, 60, 80, 120],
      },
      clickedHref:[]
    }
  },
  components: {KeyValueView},
  computed:{
    hrefColor(href){
      return "palevioletred !important";
    }
  },
  methods:{
    search() {
      this.page.pageNum = 1;
      this.queryProductList();
    },
    pageNumChange(pageNum) {
      productData.tPage.listPage.pageNum = pageNum;
      this.queryProductList(this);
    },
    pageSizeChange(pageSize) {
      productData.tPage.listPage.pageNum = 1;
      productData.tPage.listPage.pageSize = pageSize;
      this.queryProductList(this);
    },
    queryProductList() {
      let params = this.paramSearch;
      params.pageNum = this.page.pageNum;
      params.pageSize = this.page.pageSize;
      this.$Spin.show();
      this.$apiImpProduct.querySelectedProductList(params).then(response => {
        this.$Spin.hide();
        this.productList.splice(0);
        if(response.success) {
          let page = response.result;
          this.productList.push(...page.list);
          this.page.total = page.total;
        }else{
          this.page.total = 0;
          console.error(response);
          this.$Message.error("查询失败:"+response.errorMessage);
        }
      }).catch(() => {
        this.$Spin.hide();
        this.$Message.error("查询失败，请检查网络")
      });
    },
    addClickHref(href){
      this.clickedHref.push(href);
    },
    initPageInfo() {
      this.productList.splice(0);
      this.clickedHref.splice(0);
      this.paramSearch.batch = "";
      this.paramSearch.platform = null;
    }
  },
  mounted() {
    this.initPageInfo();
  }
}
</script>

<style scoped lang="less">
@import (once,optional)  "../css/base.less";

a:visited {
  color: palevioletred; /*已访问的链接颜色*/
}

</style>
